<template>
  <div class="home-main">
    <swipe :banner="banner" />
    <x-title title="精选主题"></x-title>
    <x-theme :theme="theme"></x-theme>
    <x-title title="最新新品"></x-title>
    <goods-list :product="product"></goods-list>
  </div>
</template>
<script>
import xTitle from "./components/title.vue";
import xTheme from "./components/theme.vue";
import goodsList from "./components/goodsList.vue";
import { getBanner, getTheme, getProduct } from "@/api/home";
export default {
  name: "home",
  components: {
    xTitle,
    xTheme,
    goodsList
  },
  data() {
    return {
      banner: [], // 轮播图
      theme: [], // 主题
      product: [] //新品
    };
  },
  created() {
    // 并发请求
    this.$axios.all([getBanner(), getTheme(), getProduct()]).then(
      this.$axios.spread((banner, theme, product) => {
        for (let i = 0; i < banner.items.length; i++) {
          this.banner.push(banner.items[i].img);
        }
        this.theme = theme;
        this.product = product;
      })
    );
  },
  mounted() {},
  methods: {
  },
  activated() {
  }
};
</script>
<style lang="scss" scoped>
.home-main {
  @include s-y-h(2.6rem);

}
</style>